<div class="container-fluid">
    <app-page-title name="Category" [breadcrumbItems]="breadCrumbItems"></app-page-title>
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-name mb-4">Create Category</h4>
                    <form (ngSubmit)="validSubmit()" [formGroup]="validationform">
                        <div class="form-group row mb-4">
                            <label for="name" class="col-md-2 col-form-label">Category name</label>
                            <div class="col-md-10">
                                <input type="text" class="form-control" id="name" formControlName="name"
                                    placeholder="Category name" onfocus="this.placeholder = ''"
                                    onblur="this.placeholder = 'Category name'"
                                    [ngClass]="{'is-invalid': submit && form.name.errors}">
                                <div *ngIf="submit && form.name.errors" class="invalid-feedback">
                                    <span *ngIf="form.name.errors.required">Required!</span>
                                    <span *ngIf="form.name.errors.pattern">This value should be a text.</span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="description" class="col-md-2 col-form-label">Description</label>
                            <div class="col-md-10">
                                <textarea formControlName="description" class="form-control" id="Description" rows="20"
                                    placeholder="Add Description" onfocus="this.placeholder = ''"
                                    onblur="this.placeholder = 'Add Description'"
                                    [ngClass]="{'is-invalid': submit && form.description.errors}"></textarea>
                                <div *ngIf="submit && form.description.errors" class="invalid-feedback">
                                    <span *ngIf="form.description.errors.required">Required!</span>
                                    <span *ngIf="form.description.errors.pattern">This value should be a text.</span>
                                </div>
                            </div>
                        </div>

                        <button [routerLink]="['/category/manage']" class="btn btn-danger float-right ml-3"
                            type="submit">Cancel</button>
                        <button (click)="createCategory()" class="btn btn-success mr-2 float-right"
                            type="submit">Create</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>